import React, { useState, createContext } from 'react'
//导入子组件
import Father from '../Father/Father'
//第一步：需要现在GrandFather中定义一个上下文环境的对象,这个对象的建立是需要调用React对象下的一个方法:createContext
//Es6模块化中的分别暴露
export let context = createContext();
// console.log(context)
export default function GrandFather() {

    //GrandFather组件想要向其任意后代传递数据
    //初始化一个状态数据
    let [user, setUser] = useState("李四");
    // 初始化一个状态数据
    let [userlists] = useState([{ id: 1, name: '王二麻子', age: 18 }, { id: 2, name: '李大瘸子', age: 19 }]);
    //创建一个数组
    let arr = ['张三', '王五', '赵六', '于七'];
    //定义一个事件函数
    let changeName = () => {
        //定义随机下标
        let index = Math.floor(Math.random() * arr.length);
        setUser(arr[index]);
    }
    return (
        <div style={{ width: 500, height: 500, border: '1px dashed red' }}>
            <h3>GrandFather</h3>
            <p>GrandFather组件中的状态数据-姓名：{user}</p>
            <button onClick={changeName}>更新姓名</button>
            {/* 调用Father组件 */}

            {/* 第二步：通过context这个对象中的Provider向其后代组件进行通信，需要传递value属性 
                如果想要向外提供多个数据，则value插值表达式里面可以考虑数组/对象，但是更优的选择是对象，因为数组获取值的时候还需要注意下标
                value属性值可以传递很多常用的类型数据：字符串、数值、数组、对象、布尔值...
            */}
            <context.Provider value={{ user, userlists }}>
                <Father name={user}></Father>
            </context.Provider>

        </div>
    )
}
